<template>
      <div>
            <el-col :span="24" v-loading="isLoading" element-loading-background="rgba(233,240,240,1)" element-loading-text="加载中">
                  <el-col :span="24" class="top">
                        <el-col :span="12">
                              <div class="errorEcharts" ref="errorEcharts"></div>
                        </el-col>
                        <el-col :span="12">
                              <el-col :span="12" class="div-overflow">
                                    <h3>近七日最多异常接口</h3>
                                    <el-table :data="apiSumData" style="width: 100%" class="sumTable" size="mini">
                                          <el-table-column prop="error" label="异常接口"></el-table-column>
                                          <el-table-column prop="sum" label="次数"></el-table-column>
                                          <el-table-column label="操作">

                                          </el-table-column>
                                    </el-table>
                              </el-col>
                              <el-col :span="1" class="perchbox"></el-col>
                              <el-col :span="11" class="div-overflow">
                                    <h3>近七日最多异常IP</h3>
                                    <el-table :data="ipSumData" style="width: 100%" class="sumTable" size="mini">
                                          <el-table-column prop="error" label="异常IP"></el-table-column>
                                          <el-table-column prop="sum" label="次数"></el-table-column>
                                          <el-table-column label="操作"></el-table-column>
                                    </el-table>
                              </el-col>
                        </el-col>
                  </el-col>
                  <el-col :span="24" class="body">
                        <el-table :data="dataList" style="width: 100%">
                              <el-table-column type="index" label="排序" width="100"></el-table-column>
                              <el-table-column type="selection" width="100"></el-table-column>
                              <el-table-column prop="userIp" label="IP" width="200"></el-table-column>
                              <el-table-column prop="uri" label="接口地址" width="250"></el-table-column>
                              <el-table-column prop="time" label="时间" width="250"></el-table-column>
                              <el-table-column prop="errorInfo" label="异常信息" width="500"></el-table-column>
                              <el-table-column label="操作">
                                    <template slot-scope="dataList">
                                          <el-button size="mini" @click="handleShow(dataList.row)">查看异常</el-button>
                                    </template>
                              </el-table-column>
                        </el-table>
                  </el-col>
                  <el-col :span="24" class="bottom">
                        <el-pagination background layout="prev, pager, next" :total="errorList.length" @current-change="changePage" hide-on-single-page="true"></el-pagination>
                  </el-col>
                  
            </el-col>

            <!-- 弹出层 -->
            <el-dialog title="异常信息" :visible.sync="showVisible" width="40%" :before-close="handleClose">
                  <span>

                       {{showData.errorInfo}}
 
                  </span>
                  <span slot="footer" class="dialog-footer">
                        <el-button @click="showVisible = false">取 消</el-button>
                        <el-button type="primary" @click="showVisible = false">确 定</el-button>
                  </span>
            </el-dialog>
      </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
      name:'Error',
      props: [],
      data() {
            return {
                  errorList:[],
                  dataList:[],
                  isLoading:true,
                  showVisible:false,
                  showData:{},
                  apiSumData:[],
                  ipSumData:[]
            }
      },
      methods: {
            init(){
                  this.$axios.get(this.$url+'/api/blog/errorInfo').then(
                        response=>{
                              console.log(response);
                              response.data.data.infoList.forEach((item) => {
                                    var time =  new Date(item.time);
                                    item.time= time.toLocaleDateString()+' '+time.getHours()+'时'+time.getMinutes()+'分'+time.getSeconds()+'秒';
                              })
                              this.errorList=response.data.data.infoList
                              this.apiSumData=response.data.data.apiSumData
                              this.ipSumData=response.data.data.ipSumData
                              
                              this.changePage(1)
                              this.echartsInit(response.data.data.dateList,response.data.data.errorSumList)


                              this.isLoading=false
                        }
                        
                  )
            },
            echartsInit(x,y){
                  var myChart =echarts.init(this.$refs.errorEcharts);
                  myChart.setOption({
                        title: {
                              text: '近七日接口异常信息',
                              textStyle: {
                                    fontSize: 30,
                                    fontStyle: "italic",
                                    fontFamily: "Courier New",
                                    textShadowColor: "rgba(117, 200, 9, 1)",
                                    textShadowBlur: 3,
                                    textShadowOffsetX: 3.5,
                                    textShadowOffsetY: 3.5
                              },
                        },
                        tooltip: {
                              backgroundColor:'rgba(50,50,50,0.7)',
                              textStyle:{
                                    color:'#fff',
                                    fontSize:'12',
                                    lineHeight:70
                              },
                              trigger: 'axis',
                              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                              },
                              formatter:this.showFormat
                        },
                        xAxis: {
                              data: x
                        },
                        yAxis: {},
                        series: [{
                              name: '当日异常数',
                              type: 'bar',
                              data: y,
                              color:'#00B542'
                        }]
                  });
            },
            changePage(page){
                  this.dataList=this.errorList.slice(page*10-10,page*10)
            },
            handleShow(row){
                  this.showData=row
                  this.showVisible=true;
            },
            handleClose(done) {
                  this.$confirm('确认关闭？')
                  .then(() => {
                        done();
                  })
                  .catch(()=> {});
            }
     },
      mounted(){
            this.init();
      }
};
</script>

<style lang="less" scope>
      .top{
            height: 25vh;
            background-color: #fff;
            .errorEcharts{
                  width: 100%;
                  height: 25vh;
            }
      }
      .body{
            height: 55vh;
      }
      .bottom{
            padding-top: 10px;
            height: 5vh;
      }
      .div-overflow{
            height: 24vh;
            border-radius: 8px;
            overflow: auto;
            margin-top: 10px;
            h3{
                  padding: 10px 0;
            }
      }
      .div-overflow:hover{
            background-color: #E9F0F0;
      }
      .sumTable{
            width: 85%;
            background-color: rgba(0,0,0,0);
      }
</style>